
<template>
  <div class="demo-upload">
    <img :src="itemPhoto.imgUrl" />
    <div class="demo-upload-text">
      <span class="demo-upload-text-span">{{ itemPhoto.imgName }}</span>
    </div>
    <div class="demo-upload-list-cover">
      <Icon type="ios-eye-outline" @click.native="handleView(itemPhoto)"></Icon>
      <Icon
        type="ios-trash-outline"
        @click.native="handleRemove(itemPhoto)"
      ></Icon>
    </div>

    <Modal :title="photoName" v-model="visible" style="z-index:10000">
      <img :src="imgofurl" v-if="visible" style="width: 100%" />
    </Modal>
  </div>
</template>
 
<script>
export default {
  props: ["imgExample"],
  data() {
    return {
      itemPhoto: {
        imgUrl: this.imgExample.imgUrl,
        imgName: this.imgExample.imgName
      },
      imgofurl: "",
      photoName: "",
      visible: false
    };
  },
  methods: {
    handleView(ph) {
      this.imgofurl = ph.imgUrl;
      this.photoName = ph.imgName;
      this.visible = true;
    },
    handleRemove(ph) {
      //通过ref的name查找父组件的引用
      //const fileList = this.$refs.upload.Lists;
      //this.$refs.upload.Lists.splice(Lists.indexOf(file), 1);
      this.$emit("itemphoto", ph);
    }
  },

  mounted() {}
};
</script>
 
<style>
.demo-upload {
  width: 88px;
  height: 88px;
  display: inline-block;
  text-align: center;
  line-height: 60px;
  position: relative;
  margin-left: 4px;
}
.demo-upload img {
  width: 88px;
  height: 88px;
  border: 1px solid ghostwhite;
}
.demo-upload-text {
  display: none;
  bottom: 20px;
  height: 5px;
  line-height: 5px;
}
.demo-upload-text-span {
  height: 8px;
  font-size: 8px;
}
.demo-upload-list-cover {
  /*height: 100%;
		width: 100%;*/
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
}
/* 鼠标移上去，Icon变为展示 */
.demo-upload:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0px 6px;
}
</style>